<template>
  <div>
    <!-- 自定义分享图片的 HTML 内容  -->
    <!-- <div id="share-content">
        <h1>自定义分享内容</h1>
        <p>这是一段示例文本，用于展示自定义分享图片的内容。</p>
        <img src="your-image-url.jpg" alt="示例图片"> 
      </div>
      <button @click="saveShareImage">保存分享图片</button> -->

    <el-dialog title="分享" :visible.sync="isVisible" custom-class="share-dialog">
      <div id="share-content">
        <h3 class="h3Title">邀请入驻有好礼</h3>
        <p class="helloText">Hello...我在船来船网，真心推荐给你！</p>
        <div class="image-container">
          <img :src="userInfo.image" alt="" /> <!-- 替换为实际图片路径 -->
        </div>
        <div class="invitation-info">
          <p class="yqmText">邀请码</p>
          <div class="invitationCodeText">

            <p v-for="item in userInfo.invite_code" :key="item">{{ item }}</p>
            <!-- <p>9</p>
            <p>0</p>
            <p>Z</p>
            <p>8</p>
            <p>A</p> -->

          </div>
          <p class="lianjie">链接：{{ invitationLink }}</p>
        </div>
      </div>


      <div class="saveShareBtnDiv" style="width: 100%;text-align: center;">
        <el-button class="saveShareBtn" type="primary" @click="saveShareImage">保存图片并复制链接</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import { mapState } from "vuex";


export default {
  data() {
    return {
      isVisible: false,
      invitationCode: '890Z8A',
      invitationLink: window.location.origin + '/applyForDdmission',
      infoObj:{},
    }
  },
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  props: {
    type: {
      default: 0
    }
  },
  created() {
    if(this.type == 0){
      // 供应商
      this.invitationLink = window.location.origin + '/applyForDdmission';
    } else{
      // 买家
      this.invitationLink = window.location.origin + '/purchaser';
    }
   // this.getData();
  },
  methods: {
    getData(){
      this.$httpApi("/api/share", {
        token: this.userInfo.token,
      },'get').then(res => {
        this.infoObj = res.data;
        this.invitationCode = res.data.code;
        this.invitationLink = res.data.share_url;
        console.log(res,'resresres')
      })
    },
    saveShareImage() {

      // 获取要转换为图片的 HTML 元素
      const shareContent = document.getElementById('share-content');

      // 使用 html2canvas 将 HTML 元素转换为 canvas
      html2canvas(shareContent).then(canvas => {
        // 将 canvas 转换为图片的 DataURL
        const dataURL = canvas.toDataURL('image/png');

        // 创建一个 <a> 元素用于下载图片
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = 'share-image.png'; // 下载的图片文件名

        // 模拟点击 <a> 元素进行下载
        link.click();
      });

      this.$nextTick(() => {
        if (navigator.clipboard) {
          navigator.clipboard.writeText(this.invitationLink)
            .then(() => {
              console.log('复制成功');
            })
            .catch((error) => {
              console.error('复制失败:', error);
            });
        } else {
          console.error('浏览器不支持 Clipboard API');
        }
      })



    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__headerbtn .el-dialog__close {
  font-size: 26px;
}

/deep/ .el-dialog__header {
  height: 60px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  background: #F7F7F7;

}

/deep/ .el-dialog {
  width: 596px;
}

.lianjie {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;

  font-style: normal;
  text-transform: none;
}

.invitationCodeText {
  width: 200px;
  display: flex;
  justify-content: space-between;
  margin: 11px auto;
}

.invitationCodeText p {
  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 34px;
  color: #FE8525;
  text-align: center;
  font-style: normal;
  text-decoration-line: underline;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.yqmText {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;

  font-style: normal;
  text-transform: none;
}

.helloText {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;

  font-style: normal;
  text-transform: none;
}

.h3Title {

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #000000;

  font-style: normal;
  text-transform: none;
  margin-bottom: 4px;
}

.share-dialog {
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



.image-container {
  width: 100%;
  margin: 22px 0 12px 0;
}

.image-container img {
  width: 300px;
  height: 218px;
}

.invitation-info {
  margin-bottom: 20px;
}

.invitation-info h2 {
  color: orange;
  margin: 10px 0;
}

#share-content {
  width: 334px;
  height: 432px;
  background: #F4F4F4;
  border-radius: 8px 8px 8px 8px;
  margin: auto;
  padding: 17px;
  text-align: center;
}

.saveShareBtnDiv {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.saveShareBtn {
  width: 334px;
  height: 48px;
  background: #014BC4;
  border-radius: 4px 4px 4px 4px;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;

  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>